import React, { useActionState } from 'react'

export function MyForm () {

    const increment = async (counter: number, formData: FormData): Promise<number> => {
        console.log('username: ', formData.get('username'))
        console.log('password: ', formData.get('password'))
        return counter + 1
    }

    const [ counter, action, isPending ] = useActionState<number, FormData>(increment, 100)

    return (
        <div className={ 'p-20 bg-slate-500' }>
            <p className={ 'p-10 text-white bg-slate-900 mb-3' }>{ counter }</p>
            <form action={ action } className={ 'flex gap-5' }>
                <input className={ 'p-5 bg-white' } type={ 'text' } name={ 'username' }/>
                <input className={ 'p-5 bg-white' } type={ 'password' } name={ 'password' }/>
                <button type={ 'submit' }
                        className={ 'py-3 px-5 bg-purple-500 disabled:cursor-not-allowed disabled:bg-rose-500' }
                        disabled={ isPending }>
                    submit
                </button>
            </form>
        </div>
    )
}
